<template>
  <div class="login-box-2 login-box">
    <h1 class="login-title">
      <span>欢迎使用2</span>
      <canvas ref="login-title-bg" class="login-title-bg"></canvas>
    </h1>
    <h2 class="login-subtitle">—— Welcom to login ——</h2>
    <form class="login-main">
      <!-- <h2 class="login-compony-name">xxxx科技有限公司</h2> -->
      <div class="login-input-item">
        <div class="login-input-icon user-icon"></div>
        <input class="login-input" type="text" v-model="username" placeholder="请输入用户名" />
      </div>
      <div class="login-input-item">
        <div class="login-input-icon password-icon"></div>
        <input class="login-input" type="password" v-model="password" placeholder="请输入密码" />
      </div>
      <div class="login-input-item">
        <div class="login-input-icon vcode-icon"></div>
        <input class="login-input" type="text" v-model="vcode" placeholder="请输入右侧验证码" />
        <a class="login-input-icon login-vcode__refresh-btn" :class="{ rotate: isRotate }" @click="refreshVCode()" />
        <img class="login-vcode" :src="imgSrc" alt="验证码" @click="refreshVCode" />
      </div>
      <div class="login-error-tip" v-show="errorTip">{{ errorTip }}</div>
      <data-v-btn type="default" class="login-btn" style="width:100%;background:#00A0E9;border-color:00A0E9;color: #fff"
        @click.native="submit">登录</data-v-btn>
    </form>
  </div>
</template>

<script>
import mixin from "./minin";

export default {
  mixins: [mixin],
  data() {
    return {
      isRotate: false,
    };
  },
  mounted() {
    let t_bg = this.$refs["login-title-bg"];
    let prevElement = t_bg.previousElementSibling;
    let { width, height } = prevElement.getBoundingClientRect();
    t_bg.width = width;
    t_bg.height = height;

    let option = {
      angleLength: 6,
      lineWidth: 2,
      color: "#fff",
    };

    this.drawBg(t_bg, option);
  },

  methods: {
    drawBg(canvas, option) {
      let ctx = canvas.getContext("2d");
      let defaultOption = {
        angleLength: 10,
        lineWidth: 3,
        color: "#fff",
      };

      Object.assign(defaultOption, option);

      let { width: w, height: h } = canvas;
      // 折角长度
      let angleLength = defaultOption.angleLength;
      // 线宽
      let lineWidth = defaultOption.lineWidth;

      ctx.save();
      ctx.strokeStyle = defaultOption.color;
      ctx.lineWidth = lineWidth;
      ctx.rect(0, 0, w, h);
      ctx.stroke();
      ctx.clearRect(angleLength, 0, w - angleLength * 2, h);
      ctx.clearRect(0, angleLength, w, h - angleLength * 2);
      ctx.restore();
    },
    refreshVCode() {
      this.imgSrc = this.vcodeSrc + "?key=" + +new Date();
      this.isRotate = true;
      setTimeout(() => {
        this.isRotate = false;
      }, 1000);
    },
  },
};
</script>
